<template>
  <div class="home">
    <!-- 头部 -->
    <van-sticky :offset-top="0">
      <div class="search">
        <span>茶七网</span>
        <van-search
          v-model="seachVh"
          shape="round"
          background="#B0352F"
          placeholder="请输入搜索关键词"
          clearable
          @focus="router.push('/search')"
        />
        <van-icon name="service" color="#fff" />
      </div>
    </van-sticky>
    <!-- @change="onChange" -->
    <van-tabs v-model:active="active" animated @change="onChange">
      <van-tab v-for="index in items" :title="index.label">
        <!-- 轮播图 -->
        <Swipes v-if="bannerListData" :bannerListData="bannerListData"></Swipes>

        <!-- 图标列表 -->
        <Icons v-if="iconsListData" :iconsListData="iconsListData"></Icons>

        <Ad v-if="false"></Ad>

        <!-- 滚动列表 -->
        <Scrolled v-if="false"></Scrolled>

        <!-- 爆款推荐 -->
        <Recommend
          v-if="recommendListData"
          :recommendListData="recommendListData"
        ></Recommend>

        <!-- 猜你喜欢 -->
        <Like v-if="likeListData" :likeListData="likeListData"></Like>
        <!-- 大红袍图片 -->
        <Dahongpao
          v-if="DahongpaoListData"
          :DahongpaoListData="DahongpaoListData"
        ></Dahongpao>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watchEffect } from "vue";
import { useRouter } from "vue-router";
import Swipes from "@/components/Home/Swipe.vue";
import Icons from "@/components/Home/Icons.vue";
import Recommend from "@/components/Home/Recommend.vue";
import Scrolled from "@/components/Home/Scrolled.vue";
import Like from "@/components/Home/Like.vue";
import Ad from "@/components/Home/Ad.vue";
import Dahongpao from "@/components/Home/Dahongpao.vue";

import http from "@/utils/index";
let router = useRouter();
let seachVh = ref("");
let active = ref("");

let bannerListData = ref([]);
let iconsListData = ref([]);
let likeListData = ref([]);
let recommendListData = ref([]);
let DahongpaoListData = ref([]);

let items = reactive([
  { label: "推荐" },
  { label: "大红袍" },
  { label: "绿茶" },
  { label: "铁观音" },
  { label: "普洱" },
  { label: "茶具" },
  { label: "花茶" },
]);

onMounted(() => {
  homeList();
});
let onChange = () => {
  homeList(active.value);
};
// watchEffect(()=>{

// })
let homeList = async (ids) => {
  let res = await http.get("/HomeController/list", {
    params: {
      id: ids,
    },
  });

  if (res.status == 10000) {
    bannerListData.value = Object.freeze(res.data.bannerList);
    iconsListData.value = Object.freeze(res.data.iconsList);
    likeListData.value = Object.freeze(res.data.likeList);
    recommendListData.value = Object.freeze(res.data.recommendList);
    DahongpaoListData.value = Object.freeze(res.data.dahongpaoList);
  }
};
</script>

<style lang="scss" scoped>
.home {
  height: 1600px;

  .search {
    display: flex;
    justify-content: space-around;
    background-color: #b0352f;
    align-items: center;
    span {
      font-size: 16px;
      color: #fff;
    }
    .van-search {
      width: 275px;
    }
  }
}

::v-deep .van-tabs__line {
  background: #b0352f;
}
</style>
